<template>
    <div className="side-logo" :style="sidebarCollapsed ? 'width: 64px' : 'width: 250px'">
        <img v-show="sidebarCollapsed" class="small-pic" src="@/assets/logos/logo_03.jpg"/>
        <div v-show="!sidebarCollapsed" class="pic"><img class="small-pic" src="@/assets/logos/logo_03.jpg"/>软件管理平台</div>
    </div>
</template>

<script setup>
import {computed} from "vue"
import {useStore} from "vuex"

const store = useStore()
// 侧边栏折叠状态
const sidebarCollapsed = computed(() => store.getters.sidebarCollapsed);
</script>


<style scoped lang="scss">
// 背景色
$side-background-color: rgb(50, 50, 50);
.side-logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    background-color: $side-background-color;
    .pic {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }

    .small-pic {
        width: 40px;
        height: 40px;
        //margin-left: 12px;
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        object-fit: contain;
        margin-right: 10px;
    }
}
</style>
